<template>
  <div class="middle"> 
    <div>
      <div class="titlebg">
        <a
          :href="`${base_url}/portal/list?chnlcode=tender`"
          target="_blank"
        >
          <img src="../assets/zhaobiaotop.png" class="topicimg" />
        </a>
        <div class="topic" style="position: absolute; top: 2.5rem; width: 100%">
          <ul class="flexclassaround">
            <li
              v-for="(item, index) in cateleimu"
              :key="index"
              @click="lisclick(item, index)"
            >
              <div class="flexcolclass">
                <p style="cursor: pointer">{{ item.title }}</p>
                <img
                  src="../assets/jiantoudown.png"
                  class=""
                  v-if="item.active"
                  style="position: absolute; bottom: -1rem;width: 1.3rem;"
                />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <div class="biaotou">
          <ul style="display: flex">
            <li style="width: 10%; padding-left: 0.5rem">状态</li>
            <li style="width: 20%">招标名称</li>
            <li style="width: 20%">需求单位</li>
            <li style="width: 20%">招标单位</li>
            <li style="width: 10%">项目名称</li>
            <li style="width: 9%">发布日期</li>
            <li style="width: 11%">截止时间</li>
          </ul>
        </div>
        <div class="tablebody">
          <ul style="height: 35rem; overflow-y: scroll">
            <li
              v-for="(item, index) in zhaobiaolist"
              :key="index"
              class="zhaobiaolist"
            >
              <a :href="item.url" target="_blank">
                <div style="width: 10%; padding-top: 1.65rem; height: 3.35rem">
                  <img style="width:5.55rem;height:1.85rem;"
                    src="../assets/jinxingzhong.png"
                    v-if="item.suspendstate == 0"
                  />
                  <img src="../assets/yijiezhi.png"  style="width:5.55rem;height:1.85rem;" v-else />
                </div>
                <div
                  class="danhangshenglue"
                  style="width: 20%"
                  :title="item.title"
                >
                  {{ item.title }}
                </div>
                <div
                  style="width: 20%"
                  :title="item.orgname"
                  class="duohangshwnglue"
                >
                  {{ item.orgname }}
                </div>
                <div
                  style="width: 20%"
                  :title="item.procunitname"
                  class="duohangshwnglue"
                >
                  {{ item.procunitname }}
                </div>
                <div
                  style="width: 10%"
                  class="duohangshwnglue"
                  :title="item.projectname"
                >
                  {{ item.projectname }}
                </div>
                <div
                  class="duohangshwnglue"
                  style="width: 9%"
                  :title="item.publishdate"
                >
                  {{ item.publishdate }}
                </div>
                <div
                  class="duohangshwnglue"
                  style="width: 9%"
                  :title="item.biddeadline"
                >
                  {{ item.biddeadline }}
                </div>
                <div style="width: 2%; line-height: 5rem">
                  <i
                    class="layui-icon layui-icon-right"
                    style="font-size: 1rem; color: rgba(24, 44, 86, 1)"
                  ></i>
                </div>
              </a>
              <hr
                style="
                  width: 97%;
                  margin: 0 auto;
                  height: 0.05rem;
                  background-color: rgba(154, 154, 155, 0.3);
                  border: none;
                "
              />
            </li>
          </ul>
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
import APIS from "@/api/index";

export default {
  name: "middle1",
  
  data() {
    return {
      cateleimu: [],
      cateleimu1: [],
      prev: 0,
      prev1: 0,
      zhaobiaolist: [],
      zhongbiaolist: [],
    };
  },
 
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      let arr3 = [{ title: "全部", object: "11", active: true }];
      APIS.Baseapi.projectList().then((res) => {
        res.data.map((item, index) => {
          arr3.push({
            object: item.object,
            objectid: item.objectid,
            sort: item.sort,
            title: item.objectname,
            sysobject: item.sysobject,
            active: false,
          });
        });
        this.cateleimu = [].concat(arr3);
        this.cateleimu1 = [].concat(arr3);
        this.getdatazhaobiao(); 
        this.getBiddingPublicityList(); 
      });
    },
    lisclick(item, index) { 
      this.cateleimu.map((item) => { 
        if (item.active == true) {
          item.active = false;
        }
      });
      item.active = true;
      if (item.object == "11") {
        this.getdatazhaobiao();
      } else {
        this.getdatazhaobiao(item.object);
      }
      this.prev = index; 
    },
    getdatazhaobiao(type) {
      let data = {};
      this.zhaobiaolist = [];
      if (type) {
        data["objectType"] = type;
      }
      APIS.Homepage.getTenderAnnouncementList(data)
        .then((res) => {
          res.data.map((item, index) => {
            let suspendstate = 0;
            let now_ts = Date.parse(new Date());
            let t_end_ts = new Date(item.biddeadline).getTime();
            if (now_ts > t_end_ts) {
              suspendstate = 1;
            }
            this.zhaobiaolist.push({
              ...item,
              suspendstate: suspendstate,
              url: `${this.base_url}/portal/detail?docid=${item.docid}&chnlcode=${item.chnlcode}&objtype=${item.objtype}"`,
            });
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    lisclick1(item, index) {  
      this.cateleimu1.map((item) => { 
        if (item.active == true) {
          item.active = false;
        }
      }); 

      item.active = true;
      if (item.object == "11") {
        this.getBiddingPublicityList();
      } else {
        this.getBiddingPublicityList(item.object);
      }
      this.prev1 = index;
    },
    getBiddingPublicityList(type) {
      let data = {};
      this.zhongbiaolist = [];
      if (type) {
        data["objectType"] = type;
      }
      APIS.Homepage.getBiddingPublicityList(data)
        .then((res) => {
          res.data.map((item, index) => {
            item.url = `${this.base_url}/portal/detail?docid=${item.docid}&chnlcode=${item.chnlcode}&objtype=${item.objtype}"`;
          });
          this.zhongbiaolist = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.middle { 
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  .titlebg {
    height: 5rem;
    background-image: url("../assets/zhaobiaobg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .topicimg {
    width: 94%;
    position: absolute;
    top: -0.8rem;
    left: 3%;
  }
  .biaotou {
    background-color: #182c56;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.5rem;
    color: white;
    margin-top: -0.4%;
  }
  .tablebody {
    border: 0.05rem solid #182c56;
    border-radius: 0 0 0.5rem 0.5rem;
  }
  .zhaobiaolist > a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #192d58;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .zhaobiaolist > a:hover {
    color: rgba(28, 47, 87, 0.7);
  }
}

.middle::-webkit-scrollbar {
  width: 0.05rem;
}
.bottom {
  padding-top: 2rem;
  width: 95%;
  border: 0.05rem solid;
}
.zhongbiaoliat {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #192d58;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.zhongbiaoliat :hover {
  color: rgba(28, 47, 87, 0.7);
}
</style>
